<template>
  <div class="about-furui-page">
    <!-- 复用导航栏组件 -->
    <HeaderNav />
    
    <!-- 页面标题区 -->
    <section class="page-banner">
      <div class="banner-content">
        <h1 class="page-title">{{ $t('aboutFurui.pageTitle') }}</h1>
        <div class="page-breadcrumb">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item><router-link to="/">{{ $t('common.home') }}</router-link></el-breadcrumb-item>
            <el-breadcrumb-item>{{ $t('aboutFurui.pageTitle') }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>
    </section>
    
    <!-- 主内容区 -->
    <main class="main-content">
      <!-- 模块1：企业数据展示区 -->
      <section class="enterprise-data">
        <div class="container">
          <div class="data-layout">
            <div class="data-text" data-aos="fade-right">
              <h2 class="section-title">{{ $t('aboutFurui.companyProfile') }}</h2>
              <div class="section-content">
                <p>{{ $t('aboutFurui.profileText1') }}</p>
                <p>{{ $t('aboutFurui.profileText2') }}</p>
                <p>{{ $t('aboutFurui.profileText3') }}</p>
              </div>
              <div class="company-actions">
                <el-button type="primary" class="history-btn" @click="scrollToSection('development-history')">
                  {{ $t('aboutFurui.viewHistory') }}
                  <i class="iconfont icon-arrow-right"></i>
                </el-button>
                <el-button type="default" class="culture-btn" @click="scrollToSection('corporate-culture')">
                  {{ $t('aboutFurui.viewCulture') }}
                </el-button>
              </div>
            </div>
            
            <div class="data-cards" data-aos="fade-left">
              <div class="data-card" v-for="(item, index) in dataCards" :key="index">
                <div class="card-value">
                  <span class="counter" :data-target="item.value">{{ item.prefix }}{{ currentValues[index] }}{{ item.suffix }}</span>
                </div>
                <div class="card-label">{{ item.label }}</div>
              </div>
            </div>
          </div>
        </div>
      </section>
      
      <!-- 模块2：固定锚点导航区 -->
      <section class="anchor-navigation" ref="anchorNav">
        <div class="container">
          <div class="anchor-buttons">
            <button 
              v-for="(item, index) in anchorItems" 
              :key="index"
              class="anchor-btn"
              :class="{ active: currentAnchor === item.id }"
              @click="scrollToSection(item.id)"
            >
              {{ item.name }}
            </button>
          </div>
        </div>
      </section>
      
      <!-- 企业发展历程 -->
      <section id="development-history" class="section-block history-section">
        <div class="container">
          <div class="section-header" data-aos="fade-up">
            <h2 class="section-title">{{ $t('aboutFurui.developmentHistory') }}</h2>
            <p class="section-desc">{{ $t('aboutFurui.historyDesc') }}</p>
          </div>
          
          <div class="timeline">
            <div class="timeline-line"></div>
            <div 
              class="timeline-item" 
              v-for="(item, index) in developmentHistory" 
              :key="index"
              data-aos="fade-up"
              :data-aos-delay="index * 100"
            >
              <div class="timeline-dot"></div>
              <div class="timeline-content">
                <div class="timeline-year">{{ item.year }}</div>
                <div class="timeline-event">{{ item.event }}</div>
              </div>
            </div>
          </div>
        </div>
      </section>
      
      <!-- 企业文化 -->
      <section id="corporate-culture" class="section-block culture-section">
        <div class="container">
          <div class="section-header" data-aos="fade-up">
            <h2 class="section-title">{{ $t('aboutFurui.corporateCulture') }}</h2>
            <p class="section-desc">{{ $t('aboutFurui.cultureDesc') }}</p>
          </div>
          
          <div class="culture-content">
            <div class="culture-values" data-aos="fade-right">
              <h3 class="values-title">{{ $t('aboutFurui.coreValues') }}</h3>
              <ul class="values-list">
                <li v-for="(value, index) in coreValues" :key="index" class="value-item">
                  <div class="value-icon">
                    <i class="iconfont" :class="value.icon"></i>
                  </div>
                  <div class="value-content">
                    <div class="value-name">{{ value.name }}</div>
                    <div class="value-desc">{{ value.desc }}</div>
                  </div>
                </li>
              </ul>
            </div>
            
            <div class="culture-images" data-aos="fade-left">
              <div class="culture-img primary-img">
                <img src="@/assets/images/bulding-bg.jpg" alt="{{ $t('aboutFurui.cultureImg1') }}">
              </div>
              <div class="culture-img secondary-img top-img">
                <img src="@/assets/images/bulding-bg.jpg" alt="{{ $t('aboutFurui.cultureImg2') }}">
              </div>
              <div class="culture-img secondary-img bottom-img">
                <img src="@/assets/images/bulding-bg.jpg" alt="{{ $t('aboutFurui.cultureImg3') }}">
              </div>
            </div>
          </div>
        </div>
      </section>
      
      <!-- 组织架构 -->
      <section id="organizational-structure" class="section-block structure-section">
        <div class="container">
          <div class="section-header" data-aos="fade-up">
            <h2 class="section-title">{{ $t('aboutFurui.organizationalStructure') }}</h2>
            <p class="section-desc">{{ $t('aboutFurui.structureDesc') }}</p>
          </div>
          
          <div class="structure-chart" data-aos="zoom-in">
            <div class="structure-node top-node">
              {{ $t('aboutFurui.boardOfDirectors') }}
            </div>
            
            <div class="structure-level">
              <div class="structure-node">
                {{ $t('aboutFurui.generalManager') }}
              </div>
            </div>
            
            <div class="structure-level">
              <div class="structure-node">
                {{ $t('aboutFurui.productionDept') }}
              </div>
              <div class="structure-node">
                {{ $t('aboutFurui.technologyDept') }}
              </div>
              <div class="structure-node">
                {{ $t('aboutFurui.marketingDept') }}
              </div>
              <div class="structure-node">
                {{ $t('aboutFurui.financeDept') }}
              </div>
            </div>
            
            <div class="structure-level">
              <div class="structure-node">
                {{ $t('aboutFurui.miningSection') }}
              </div>
              <div class="structure-node">
                {{ $t('aboutFurui.processingSection') }}
              </div>
              <div class="structure-node">
                {{ $t('aboutFurui.researchSection') }}
              </div>
              <div class="structure-node">
                {{ $t('aboutFurui.salesSection') }}
              </div>
              <div class="structure-node">
                {{ $t('aboutFurui.hrSection') }}
              </div>
            </div>
          </div>
        </div>
      </section>
      
      <!-- 荣誉资质 -->
      <section id="honors" class="section-block honors-section">
        <div class="container">
          <div class="section-header" data-aos="fade-up">
            <h2 class="section-title">{{ $t('aboutFurui.honorsAndQualifications') }}</h2>
            <p class="section-desc">{{ $t('aboutFurui.honorsDesc') }}</p>
          </div>
          
          <div class="honors-grid">
            <div 
              class="honor-item" 
              v-for="(item, index) in honors" 
              :key="index"
              data-aos="zoom-in"
              :data-aos-delay="index % 4 * 100"
            >
              <div class="honor-img">
                <img :src="item.imgUrl" :alt="item.title">
              </div>
              <div class="honor-title">{{ item.title }}</div>
              <div class="honor-date">{{ item.date }}</div>
            </div>
          </div>
        </div>
      </section>
    </main>
    
    <!-- 页脚 -->
    <Footer />
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import AOS from 'aos'
import $ from 'jquery'
import { formatDate } from '@/utils/date-utils'
import HeaderNav from '@/components/layout/HeaderNav.vue'
import Footer from '@/components/layout/Footer.vue'

// 响应式状态
const currentValues = ref([0, 0, 0])
const animationInProgress = ref(false)
const currentAnchor = ref('development-history')
const anchorNav = ref(null)
const route = useRoute()

// 数据卡片数据
const dataCards = [
  {
    value: 1998,
    prefix: '',
    suffix: '',
    label: '成立年份'
  },
  {
    value: 5000,
    prefix: '',
    suffix: '+',
    label: '员工人数'
  },
  {
    value: 28,
    prefix: '',
    suffix: '个',
    label: '全球分支机构'
  }
]

// 锚点导航数据
const anchorItems = [
  { id: 'development-history', name: '发展历程' },
  { id: 'corporate-culture', name: '企业文化' },
  { id: 'organizational-structure', name: '组织架构' },
  { id: 'honors', name: '荣誉资质' }
]

// 企业发展历程数据
const developmentHistory = [
  {
    year: '1998',
    event: '福瑞企业成立，开始在金矿开采领域布局'
  },
  {
    year: '2003',
    event: '第一条现代化生产线建成并投产'
  },
  {
    year: '2008',
    event: '荣获"国家级高新技术企业"称号'
  },
  {
    year: '2012',
    event: '开始国际化战略，在非洲建立首个海外基地'
  },
  {
    year: '2016',
    event: '完成股份制改造，启动上市计划'
  },
  {
    year: '2020',
    event: '入选"中国矿业企业50强"，排名第32位'
  },
  {
    year: '2023',
    event: '全球分支机构达到28个，年产能突破150万吨'
  }
]

// 核心价值观数据
const coreValues = [
  {
    icon: 'icon-integrity',
    name: '诚信正直',
    desc: '坚守商业道德，诚信经营，赢得客户和社会的尊重'
  },
  {
    icon: 'icon-innovation',
    name: '创新驱动',
    desc: '持续技术创新，引领行业发展，创造核心竞争力'
  },
  {
    icon: 'icon-cooperation',
    name: '合作共赢',
    desc: '与合作伙伴共同发展，实现互利共赢的良好生态'
  },
  {
    icon: 'icon-responsibility',
    name: '社会责任',
    desc: '重视环境保护，推动可持续发展，回馈社会'
  }
]

// 荣誉资质数据
const honors = [
  {
    imgUrl: '@/assets/images/bulding-bg.jpg',
    title: '国家级高新技术企业',
    date: '2008年'
  },
  {
    imgUrl: '@/assets/images/bulding-bg.jpg',
    title: '中国矿业企业50强',
    date: '2020年'
  },
  {
    imgUrl: '@/assets/images/bulding-bg.jpg',
    title: 'ISO9001质量管理体系认证',
    date: '2010年'
  },
  {
    imgUrl: '@/assets/images/bulding-bg.jpg',
    title: '安全生产标准化一级企业',
    date: '2015年'
  },
  {
    imgUrl: '@/assets/images/bulding-bg.jpg',
    title: '环境保护先进单位',
    date: '2018年'
  },
  {
    imgUrl: '@/assets/images/bulding-bg.jpg',
    title: '优秀雇主企业',
    date: '2022年'
  },
  {
    imgUrl: '@/assets/images/bulding-bg.jpg',
    title: '科技创新一等奖',
    date: '2021年'
  },
  {
    imgUrl: '@/assets/images/bulding-bg.jpg',
    title: '出口创汇先进企业',
    date: '2019年'
  }
]

// 数字增长动画
const animateCounter = (element, target, duration = 2000) => {
  return new Promise((resolve) => {
    const start = 0
    const increment = target / (duration / 16)
    let current = start
    
    const updateCounter = () => {
      current += increment
      if (current >= target) {
        current = target
        clearInterval(timer)
        resolve()
      }
      
      // 格式化数字（添加千分位）
      let formattedValue = Math.floor(current).toLocaleString()
      element.textContent = formattedValue
    }
    
    const timer = setInterval(updateCounter, 16)
  })
}

// 检查元素是否在视口中
const isInViewport = (el) => {
  const rect = el.getBoundingClientRect()
  return (
    rect.top <= (window.innerHeight || document.documentElement.clientHeight) * 0.75 &&
    rect.bottom >= 0
  )
}

// 处理滚动事件
const handleScroll = () => {
  // 数字动画触发
  if (!animationInProgress.value && isInViewport(document.querySelector('.enterprise-data'))) {
    animationInProgress.value = true
    startAnimation()
  }
  
  // 锚点导航高亮
  const sections = anchorItems.map(item => document.getElementById(item.id))
  const currentSection = sections.find(section => {
    const rect = section.getBoundingClientRect()
    return rect.top <= 200 && rect.bottom >= 200
  })
  
  if (currentSection) {
    const id = currentSection.getAttribute('id')
    currentAnchor.value = id
  }
  
  // 导航栏吸附效果
  if (anchorNav.value) {
    const navRect = anchorNav.value.getBoundingClientRect()
    if (window.scrollY > navRect.top + navRect.height) {
      anchorNav.value.classList.add('sticky')
    } else {
      anchorNav.value.classList.remove('sticky')
    }
  }
}

// 开始数字动画
const startAnimation = async () => {
  // 重置当前值
  currentValues.value = [0, 0, 0]
  
  // 获取所有计数器元素
  const counters = document.querySelectorAll('.counter')
  
  // 按顺序动画每个数字
  for (let i = 0; i < counters.length; i++) {
    const target = parseInt(counters[i].dataset.target)
    await animateCounter(counters[i], target)
    currentValues.value[i] = target
  }
}

// 滚动到指定区块
const scrollToSection = (sectionId) => {
  const section = document.getElementById(sectionId)
  if (section) {
    currentAnchor.value = sectionId
    const offsetTop = section.offsetTop - 80 // 导航栏高度偏移
    window.scrollTo({
      top: offsetTop,
      behavior: 'smooth'
    })
  }
}

onMounted(() => {
  // 初始化AOS
  AOS.init({
    duration: 1000,
    once: true
  })
  
  // 初始检查滚动位置
  handleScroll()
  
  // 添加滚动监听
  window.addEventListener('scroll', handleScroll)
})

onUnmounted(() => {
  // 移除滚动监听
  window.removeEventListener('scroll', handleScroll)
})
</script>

<style scoped lang="scss">
.about-furui-page {
  // 页面标题区
  .page-banner {
    background: linear-gradient(135deg, #0A2463 0%, #3E92CC 100%);
    padding: 80px 0;
    text-align: center;
    color: white;
    
    .banner-content {
      .page-title {
        font-size: 2.5rem;
        margin-bottom: 15px;
        font-weight: 700;
      }
      
      .page-breadcrumb {
        .el-breadcrumb {
          .el-breadcrumb__item {
            .el-breadcrumb__inner {
              color: rgba(255, 255, 255, 0.8);
              
              &.is-link {
                &:hover {
                  color: #ffffff;
                }
              }
            }
            
            .el-breadcrumb__separator {
              color: rgba(255, 255, 255, 0.5);
              margin: 0 8px;
            }
          }
        }
      }
    }
    
    @media (max-width: 768px) {
      padding: 60px 0;
      
      .banner-content {
        .page-title {
          font-size: 2rem;
        }
      }
    }
  }
  
  // 主内容区
  .main-content {
    // 企业数据展示区
    .enterprise-data {
      padding: 80px 0;
      
      .data-layout {
        display: flex;
        gap: 40px;
        align-items: center;
        
        @media (max-width: 991px) {
          flex-direction: column;
        }
        
        .data-text {
          flex: 1;
          
          .section-title {
            font-size: 2rem;
            color: #0A2463;
            margin-bottom: 20px;
            position: relative;
            padding-bottom: 15px;
            
            &::after {
              content: '';
              position: absolute;
              bottom: 0;
              left: 0;
              width: 60px;
              height: 3px;
              background-color: #D8315B;
            }
          }
          
          .section-content {
            margin-bottom: 30px;
            
            p {
              margin-bottom: 15px;
              line-height: 1.6;
              color: #666;
            }
          }
          
          .company-actions {
            display: flex;
            gap: 15px;
            
            .history-btn {
              background-color: #D8315B;
              border-color: #D8315B;
              padding: 12px 25px;
              
              &:hover {
                background-color: #b92a4c;
                border-color: #b92a4c;
              }
            }
            
            .culture-btn {
              padding: 12px 25px;
            }
          }
        }
        
        .data-cards {
          flex: 1;
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 20px;
          
          @media (max-width: 768px) {
            grid-template-columns: repeat(1, 1fr);
            width: 100%;
          }
          
          .data-card {
            background-color: #FFD166;
            padding: 30px 20px;
            border-radius: 8px;
            text-align: center;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s ease;
            
            &:hover {
              transform: translateY(-5px);
            }
            
            .card-value {
              font-size: 2.5rem;
              font-weight: 700;
              color: #0A2463;
              margin-bottom: 10px;
              
              .counter {
                display: inline-block;
              }
            }
            
            .card-label {
              font-size: 1rem;
              color: #333;
            }
          }
        }
      }
    }
    
    // 固定锚点导航区
    .anchor-navigation {
      background-color: #f9f9f9;
      padding: 15px 0;
      border-top: 1px solid #eee;
      border-bottom: 1px solid #eee;
      transition: all 0.3s ease;
      
      &.sticky {
        position: fixed;
        top: 80px;
        left: 0;
        right: 0;
        z-index: 998;
        background-color: rgba(255, 255, 255, 0.95);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        border-color: transparent;
      }
      
      .anchor-buttons {
        display: flex;
        justify-content: center;
        gap: 5px;
        
        .anchor-btn {
          padding: 10px 20px;
          background: none;
          border: none;
          font-size: 1rem;
          color: #666;
          cursor: pointer;
          border-radius: 20px;
          transition: all 0.3s ease;
          
          &:hover {
            color: #D8315B;
          }
          
          &.active {
            background-color: #D8315B;
            color: #ffffff;
          }
        }
      }
    }
    
    // 通用区块样式
    .section-block {
      padding: 80px 0;
      
      .section-header {
        text-align: center;
        margin-bottom: 50px;
        
        .section-title {
          font-size: 2rem;
          color: #0A2463;
          margin-bottom: 15px;
        }
        
        .section-desc {
          color: #666;
          max-width: 700px;
          margin: 0 auto;
        }
      }
    }
    
    // 发展历程
    .history-section {
      background-color: #f9f9f9;
      
      .timeline {
        position: relative;
        max-width: 1000px;
        margin: 0 auto;
        
        .timeline-line {
          position: absolute;
          top: 0;
          bottom: 0;
          left: 50%;
          width: 2px;
          background-color: #D8315B;
          transform: translateX(-50%);
        }
        
        .timeline-item {
          margin-bottom: 40px;
          position: relative;
          display: flex;
          
          &:nth-child(odd) {
            justify-content: flex-start;
            
            .timeline-content {
              margin-right: 30px;
              text-align: right;
            }
          }
          
          &:nth-child(even) {
            justify-content: flex-end;
            
            .timeline-content {
              margin-left: 30px;
              text-align: left;
            }
          }
          
          .timeline-dot {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color: #D8315B;
            position: absolute;
            left: 50%;
            top: 20px;
            transform: translateX(-50%);
            z-index: 1;
          }
          
          .timeline-content {
            width: 45%;
            
            .timeline-year {
              font-size: 1.5rem;
              font-weight: 700;
              color: #0A2463;
              margin-bottom: 10px;
            }
            
            .timeline-event {
              color: #666;
              line-height: 1.6;
              padding: 20px;
              background-color: #ffffff;
              border-radius: 8px;
              box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            }
          }
        }
        
        @media (max-width: 768px) {
          .timeline-line {
            left: 30px;
          }
          
          .timeline-item {
            flex-direction: column;
            margin-left: 20px;
            
            &:nth-child(odd), &:nth-child(even) {
              justify-content: flex-start;
              
              .timeline-content {
                margin-left: 30px;
                margin-right: 0;
                text-align: left;
                width: 85%;
              }
            }
            
            .timeline-dot {
              left: 30px;
            }
          }
        }
      }
    }
    
    // 企业文化
    .culture-section {
      .culture-content {
        display: flex;
        gap: 40px;
        align-items: center;
        
        @media (max-width: 991px) {
          flex-direction: column;
        }
        
        .culture-values {
          flex: 1;
          
          .values-title {
            font-size: 1.5rem;
            color: #0A2463;
            margin-bottom: 30px;
          }
          
          .values-list {
            .value-item {
              display: flex;
              margin-bottom: 25px;
              
              .value-icon {
                width: 50px;
                height: 50px;
                border-radius: 50%;
                background-color: rgba(10, 36, 99, 0.1);
                display: flex;
                align-items: center;
                justify-content: center;
                margin-right: 15px;
                flex-shrink: 0;
                
                .iconfont {
                  font-size: 24px;
                  color: #0A2463;
                }
              }
              
              .value-content {
                .value-name {
                  font-weight: 500;
                  margin-bottom: 5px;
                  color: #333;
                }
                
                .value-desc {
                  color: #666;
                  font-size: 0.95rem;
                }
              }
            }
          }
        }
        
        .culture-images {
          flex: 1;
          position: relative;
          height: 500px;
          
          @media (max-width: 768px) {
            height: 400px;
          }
          
          .culture-img {
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
            
            &.primary-img {
              width: 70%;
              height: 70%;
              position: absolute;
              top: 15%;
              left: 0;
              z-index: 2;
            }
            
            &.secondary-img {
              width: 60%;
              height: 45%;
              position: absolute;
              z-index: 1;
              
              &.top-img {
                top: 0;
                right: 0;
              }
              
              &.bottom-img {
                bottom: 0;
                right: 10%;
              }
            }
          }
        }
      }
    }
    
    // 组织架构
    .structure-section {
      background-color: #f9f9f9;
      
      .structure-chart {
        max-width: 900px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
        
        .structure-level {
          display: flex;
          justify-content: center;
          gap: 20px;
          width: 100%;
          
          @media (max-width: 768px) {
            flex-wrap: wrap;
          }
        }
        
        .structure-node {
          background-color: #ffffff;
          border: 1px solid #e0e0e0;
          padding: 20px 15px;
          border-radius: 8px;
          text-align: center;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
          flex: 1;
          max-width: 200px;
          
          &.top-node {
            background-color: #0A2463;
            color: #ffffff;
            padding: 25px 15px;
            max-width: 300px;
          }
        }
      }
    }
    
    // 荣誉资质
    .honors-section {
      .honors-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 25px;
        
        @media (max-width: 1200px) {
          grid-template-columns: repeat(3, 1fr);
        }
        
        @media (max-width: 768px) {
          grid-template-columns: repeat(2, 1fr);
        }
        
        @media (max-width: 575px) {
          grid-template-columns: 1fr;
        }
        
        .honor-item {
          background-color: #ffffff;
          border-radius: 8px;
          overflow: hidden;
          box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
          transition: transform 0.3s ease;
          
          &:hover {
            transform: translateY(-5px);
          }
          
          .honor-img {
            height: 180px;
            overflow: hidden;
            
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              transition: transform 0.5s ease;
              
              &:hover {
                transform: scale(1.05);
              }
            }
          }
          
          .honor-title {
            padding: 15px;
            font-weight: 500;
            text-align: center;
            border-bottom: 1px solid #f0f0f0;
          }
          
          .honor-date {
            padding: 10px 15px;
            text-align: center;
            font-size: 0.9rem;
            color: #666;
          }
        }
      }
    }
  }
}
</style>